<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <style>
        label {
            display: inline-block;
            width: 50px;
        }

        div {
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
    <h1>注册</h1>
    <form action="">
        <div>
            <label for="">账号</label>
            <input type="text">
        </div>
        <div>
            <label for="">密码</label>
            <input type="text">
        </div>
        <div>
            <label for=""></label>
            <input type="button" value="注册">
        </div>
    </form>

    <script>
        const ipt = document.querySelectorAll('input')[0];
        const pwd = document.querySelectorAll('input')[1];
        const btn = document.querySelectorAll('input')[2];

        btn.onclick = function () {
            let data = localStorage.getItem('users');
            if (data) {
                let arr = JSON.parse(data);
                let result = arr.some(item => item.id == ipt.value);
                if (result) {
                    console.log("占用");
                } else {
                    arr.push({
                        id: ipt.value,
                        password: pwd.value
                    });
                    localStorage.setItem('users', JSON.stringify(arr));
                }
            } else {
                let arr = [{
                    id: ipt.value,
                    password: pwd.value
                }];
                localStorage.setItem('users', JSON.stringify(arr));
            }
        }
    </script>
</body>

</html>